<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${basePath!}/static/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="${basePath!}/static/css/form.css"  media="all">
</head>
<body>
<div class="layui-btn-group" style="margin-top: 2px;">
    <button class="layui-btn" id="add">录入</button>
    <button class="layui-btn" id="edit">编辑</button>
    <button class="layui-btn" id="delete">删除</button>
</div>
<table class="layui-hide" id="visit" lay-filter="visitFilter"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="visit">是否立项</a>
</script>
<script src="${basePath!}/static/js/jquery.min.js" type="text/javascript"></script>
<script src="${basePath!}/static/layui/layui.js"  charset="utf-8" type="text/javascript"></script>
<script src="${basePath!}/static/js/utils.js"  charset="utf-8" type="text/javascript"></script>
<script>
    var visitId;
    var customId;
    layui.use(['table', 'form', 'laydate'], function(){
        layui.laydate.render({
            elem: '#time', //指定元素
            type: 'datetime',
            format: 'yyyy-MM-ddTHH:mm:ss'
        });
        layui.laydate.render({
            elem: '#remindTime', //指定元素
            type: 'datetime',
            format: 'yyyy-MM-ddTHH:mm:ss'
        });
        initSelect('customId','${basePath!}/custom/selectAll','id','customName');
        layui.form.render('select','visitFilter');

        //监听提交
        layui.form.on('submit(onSave)', function(data){
            if(visitId){
                $("#id").val(visitId);
            }
            $.ajax({
                type: "POST",
                url:"${basePath!}/visit/edit",
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                async: true,
                error: function(request) {
                    layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                },
                success: function(data) {
                    if(data.status==false){
                        layer.alert(data.message);
                    }
                    if(data.status==true){
                        layer.close(layerid);
                        layui.table.reload('visit');
                        $("#reset").click();//重置表单
                    }
                }
            });
            return false;//防止表单提交后跳转
        });
    });

    function initPage(data) {
        customId = data.id;
        var table = layui.table;
        table.render({
            elem: '#visit'
            ,url:'${basePath!}/visit/selectPageList?customId='+data.id
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: 'ID', hide: true}
                ,{field:'customName', minWidth:80, title: '客户名称'}
                ,{field:'prop', minWidth:70, title: '拜访性质'}
                ,{field:'time', minWidth: 160, title: '拜访时间'}
                ,{field:'content', minWidth:280, title: '拜访内容'}
                ,{field:'remindTime', minWidth: 160, title: '拜访提醒'}
                ,{fixed: 'right', width:90, align:'center', toolbar: '#barDemo', title: '操作'}
            ]]
            ,page: true
        });
        //监听工具条
        table.on('tool(visitFilter)', function(obj){
            if(obj.event === 'visit'){
                layer.open({
                    type: 2,
                    title:["项目立项"],
                    area: ['100%', '100%'],
                    maxmin:true,
                    scrollbar: false ,
                    content:['project','yes'],
                    success: function (layer, index) {
                        // 获取子页面的iframe
                        var iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        iframe.initPage(customId);
                    }
                });
            }
        });
    }

    //添加按钮点击事件
    $("#add").click(function () {
        visitId = '';
        $("#reset").click();//重置表单(新建时在进入表单前要重置一下表单的内容，不然表单打开后会显示上一次的表单的内容。这里调用表单中重置按钮的点击方法来重置)
        $("#customId").val(customId);
        layerid=layer.open({//开启表单弹层
            skin: 'layui-layer-molv',
            area:'60%',
            type: 1,
            title:'新建拜访记录',
            content: $('#visit_form_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#delete").click(function () {
        var data = layui.table.checkStatus('visit').data;
        if(data.length==0){
            layer.alert("先选择一条信息");
            return;
        }
        $.ajax({
            type: "DELETE",
            url: "${basePath!}/visit/deleteByIds?ids="+getIds(data),
            contentType: "application/json",
            dataType: "json",
            async: true,
            error: function (request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function (result) {
                layui.table.reload('visit');
                layer.alert("共删除"+data.length+"信息");
            }
        });
    });

    $("#edit").click(function () {
        var data = layui.table.checkStatus('visit').data;
        if(data.length==0){
            layer.alert("先选择一条信息");
            return;
        }
        if(data.length>1){
            layer.alert("至多只能选择一条信息编辑");
            return;
        }
        $.ajax({
            type: "GET",
            url:"${basePath!}/visit/selectByPrimaryKey?id="+data[0].id,
            async: true,
            error: function(request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function(result) {
                visitId = result.data.id;
                if(result.status==false){
                    layer.alert(data.message);
                }
                if(result.status==true){
                    //向表单填充数据
                    layui.form.val("visitFilter",result.data);
                    //开启编辑表单所在的弹层。注意编辑和新建的表单是一套模板
                    layerid=layer.open({
                        skin: 'layui-layer-molv',
                        area:'60%',
                        type: 1,
                        title:'编辑客户信息',
                        content: $('#visit_form_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                }
            }
        });
    });
</script>
<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓add↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->
<div id="visit_form_div" hidden="" class="layui-fluid" style="margin: 15px;">
    <form class="layui-form" lay-filter="visitFilter" action="" id="visit_form">
        <input id="id" name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访客户</label>
            <div class="layui-input-block">
                <select name="customId" id="customId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访内容</label>
            <div class="layui-input-block">
                <textarea id="content" name="content" lay-verify="required" placeholder="请输入拜访内容" class="layui-textarea"></textarea>
                <#--<input type="text" id="content" name="content" lay-verify="required" autocomplete="off" placeholder="请输入拜访内容" class="layui-input">-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访性质</label>
            <div class="layui-input-block">
                <input type="text" id="prop" name="prop" lay-verify="required" autocomplete="off" placeholder="请输入拜访性质" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访时间</label>
            <div class="layui-input-block">
                <input type="text" id="time" name="time" autocomplete="off" placeholder="请输入拜访时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访提醒</label>
            <div class="layui-input-block">
                <input type="text" id="remindTime" name="remindTime" autocomplete="off" placeholder="请输入提醒时间" class="layui-input">
            </div>
        </div>
        <#--<div class="layui-form-item">-->
            <#--<label class="layui-form-label">拜访状态</label>-->
            <#--<div class="layui-input-block">-->
                <#--<input type="text" id="status" name="status" autocomplete="off" placeholder="请输入拜访状态" class="layui-input">-->
            <#--</div>-->
        <#--</div>-->
        <div class="layui-form-item">
            <div style="text-align: center;">
                <button class="layui-btn" lay-submit="" lay-filter="onSave">保存</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<#--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑add↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
</body>
</html>